/** 
 * 入参
    type： 1- 指令   2-簿记
    onOk：指令下达成功或簿记成功抛出事件
    onCancel：取消抛出事件

*/
import React, { PureComponent } from 'react';
import { FirstHeaderC, NoDataMaskC, MilepostC } from '../../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Spin } from 'antd';
import InfoListC from '../../../marketAnalysis/bondDeviationAnalysis/bondDeviationDetail/basicInfo/infoList';
import { bondInfoTwo, bondInfoThree } from '../../../marketAnalysis/bondDeviationAnalysis/bondDeviationDetail/basicInfo/ConfigInfo';
import { connect } from 'dva';
import 'moment/locale/zh-cn';
@Form.create()
@connect(({ bondTradeM, bondDeviationDetailM, loading }) => ({
  bondTradeM,
  bondDeviationDetailM,
  loading,
}))
export default class BondInfoC extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      bondBasicInfo: {}, //债券基本信息
      bondPublishInfo: {}, //债券发行人信息
      dateLine: [], //日历进度条数据
    };
  }

  componentDidMount() {
    if (this.props.bondID) this.queryData(this.props.bondID, this.props.tradingCode, this.props.exchangeCode);
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.props.bondID !== nextProps.bondID) {
      if (nextProps.bondID) {
        this.queryData(nextProps.bondID, nextProps.tradingCode, nextProps.exchangeCode);
      } else {
        this.setState({
          bondBasicInfo: {}, //债券基本信息
          bondPublishInfo: {}, //债券发行人信息
          dateLine: [], //日历进度条数据
        });
      }
    }
  }
  //查询数据
  queryData = (bondID, tradingCode, exchangeCode) => {
    const { dispatch } = this.props;
    //获取基本信息
    dispatch({
      type: 'bondDeviationDetailM/queryBondBasicInfoDetail',
      payload: {
        secucode: bondID,
      },
      callback: (data) => {
        if (data) {
          this.setState({
            bondBasicInfo: data,
          });
        } else {
          this.setState({
            bondBasicInfo: {},
          });
        }
      },
    });
    //获取发行人信息
    dispatch({
      type: 'bondDeviationDetailM/queryBondIssuerInfoDetail',
      payload: {
        bondID,
        tradingCode,
        exchangeCode,
      },
      callback: (data) => {
        if (data) {
          if (this.props.bondID) {
            this.setState({
              bondPublishInfo: data,
            });
          }
        } else {
          this.setState({
            bondPublishInfo: {},
          });
        }
      },
    });
    //获取债券日历
    dispatch({
      type: 'bondDeviationDetailM/queryBondCalendar',
      payload: {
        bondID,
        tradingCode,
        exchangeCode,
      },
      callback: (data) => {
        if (data) {
          this.setState({
            dateLine: data,
          });
        } else {
          this.setState({
            dateLine: [],
          });
        }
      },
    });
  };

  render() {
    const { loading, bondID } = this.props;
    const { bondBasicInfo, bondPublishInfo, dateLine } = this.state;
    const dataLines = !bondID
      ? [
          { name: '发起日', date: '2022-01-01' },
          { name: '起息日', date: '2022-01-01' },
          { name: '缴款日', date: '2022-01-01' },
          { name: '上市日', date: '2022-01-01' },
          { name: '付息日', date: '2022-01-01' },
          { name: '到期日', date: '2022-01-01' },
        ]
      : dateLine;
    const basicProps = {
      data: { 0: bondBasicInfo, 1: {}, 2: {} },
      infoList: bondInfoTwo,
      marginLeft: '8px',
      width: '84px',
    };
    const publishProps = {
      data: { 0: {}, 1: bondPublishInfo, 2: {} },
      infoList: bondInfoThree,
      marginLeft: '8px',
      width: '100px',
    };
    return (
      <div className={'bondDeviationDetail'}>
        <div className={'basic_info'} style={{ height: '100%' }}>
          <div>
            <FirstHeaderC title={'债券基础信息'} />
          </div>
          <div style={{ position: 'relative' }}>
            <Spin spinning={loading.effects['bondDeviationDetailM/queryBondBasicInfoDetail'] == true}>
              <InfoListC {...basicProps} />
            </Spin>
            {!this.props.bondID ? <NoDataMaskC title={'请选择证券代码,加载相应数据!'} height={'inherit'} /> : null}
          </div>
          <div style={{ marginTop: '20px' }}>
            <FirstHeaderC title={'债券发行信息'} />
          </div>

          <div style={{ position: 'relative' }}>
            <Spin spinning={loading.effects['bondDeviationDetailM/queryBondCalendar'] == true}>
              {
                <MilepostC data={dataLines} />
                // <p style={{ height:'150px', textAlign: 'center',lineHeight:'150px' }}>暂无数据</p>
              }
            </Spin>
            {!this.props.bondID ? <NoDataMaskC title={'请选择证券代码,加载相应数据!'} height={'inherit'} /> : null}
          </div>
          <div style={{ marginTop: '20px' }}>
            <FirstHeaderC title={'发行人基本信息'} />
          </div>
          <div style={{ position: 'relative', height: '355px' }}>
            <Spin spinning={loading.effects['bondDeviationDetailM/queryBondIssuerInfoDetail'] == true}>
              <InfoListC {...publishProps} />
            </Spin>
            {!this.props.bondID ? <NoDataMaskC title={'请选择证券代码,加载相应数据!'} height={'230px'} /> : null}
          </div>
        </div>
      </div>
    );
  }
}
